<template>
  <CustomModal
    title="添加用户"
    v-model="visible"
    :showCancelButton="false"
    confirmText="创建账号"
    @confirm="modelConfirm"
  >
    <up-toast ref="uToastRef" />
    <scroll-view class="scroll-content" scroll-y>
      <uni-forms ref="uFormRef" :modelValue="formData" :rules="rules">
        <uni-forms-item name="userName">
          <template #label>
            <view class="nw-label">用户名:</view>
          </template>
          <nw-Input
            v-model="formData.userName"
            label="用户名"
            :maxlength="30"
          ></nw-Input>
        </uni-forms-item>
        <uni-forms-item name="password">
          <template #label>
            <view class="nw-label">登录密码:</view>
          </template>
          <nw-Input
            v-model="formData.password"
            label="登录密码"
            type="password"
            :maxlength="30"
          ></nw-Input>
        </uni-forms-item>
        <uni-forms-item name="roleIdList">
          <template #label>
            <view class="nw-label">用户角色:</view>
          </template>
          <view class="uss-form-select">
            <zxz-uni-data-select
              v-model="formData.roleIdList"
              :localdata="roleList"
              placeholder="请输入用户角色"
              :emptyTips="$t('system.noOption')"
              :clear="false"
              @change="handleRoleChange"
            ></zxz-uni-data-select>
          </view>
        </uni-forms-item>
      </uni-forms>
    </scroll-view>
  </CustomModal>
</template>

<script setup>
defineOptions({
  name: 'AddUser',
  inheritAttrs: false
})

const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  row: {
    type: Object,
    default: () => {}
  }
})
const visible = defineModel({
  type: Boolean,
  default: false
})
const emit = defineEmits(['update'])

const uToastRef = ref(null)
const uFormRef = ref(null)
const formData = ref({
  userName: '',
  password: '',
  roleIdList: ''
})
// 校验规则
const rules = {
  userName: {
    rules: g_rules.userName
  },
  password: {
    rules: g_rules.password
  },
  roleIdList: {
    rules: g_rules.selectRule('用户角色')
  }
}
const roleList = [
  { value: 0, text: '篮球' },
  { value: 1, text: '足球' },
  { value: 2, text: '游泳' }
]

onMounted(_ => {
  // getConfig()
})

function getConfig() {
  g_utils.showLoading()
  g_api.device
    .apiGetFaultSwitchConfig({
      // imei: props.imei
    })
    .then(({ code, data }) => {
      if (code === 200 && data) {
        // formData.value = data
      }
    })
    .finally(_ => {
      uni.hideLoading()
    })
}

const modelConfirm = _ => {
  uFormRef.value
    .validate()
    .then(res => {
      uToastRef.value.show({
        type: 'success',
        message: '创建账号成功'
      })
      visible.value = false
      emit('add')
    })
    .catch(err => {
      console.log('err', err)
    })
}

const handleDeptChange = e => {
  console.log('handleDeptChange:', e.detail.value)
}

const handleRoleChange = e => {
  console.log('handleRoleChange:', e)
}
</script>

<style lang="scss" scoped>
.scroll-content {
  max-height: 100%;
  margin-top: 72rpx;
  margin-bottom: 22rpx;
}

.nw-label {
  width: 96rpx;
  margin-right: 12rpx;
}

// zxz-uni-data-select多选择框-样式
.uss-form-select {
  height: 32rpx !important;
  min-height: 32rpx !important;
  :deep(.uni-stat__select) {
    .uni-select {
      position: fixed;
      z-index: 2;
      width: 189 * 2rpx;
    }
  }
}
</style>
